<template>
  <div class="main">
    <div :class="FullScreen ? 'container' : 'container2'">
      <div class="container-left">
        <div class="container-top">
          <div class="top">
            <div class="title">申报项目审核</div>
            <div class="oper">
              <el-button
                type="primary"
                class="shrink"
                :icon="
                  FullScreen ? 'iconfont icon-zhankai' : 'iconfont icon-shouqi'
                "
                @click="FullFunction()"
                >{{ FullScreen ? "展开" : "收起" }}</el-button
              >
              <el-button
                type="primary"
                class="close"
                icon="iconfont icon-guanbi"
                @click="back"
                >关闭</el-button
              >
            </div>
          </div>
          <div class="contentTitle">
            <p>{{ contentList.declare_name }}</p>
          </div>
        </div>
        <div class="content">
          <div class="item">
            <p>项目负责人</p>
            <p>
              <span v-for="(item, index) in principalData" :key="index"
                >{{ item.real_name }}&nbsp;</span
              >
              <span class="chakan" @click="centerDialogVisible = true"
                >查看基础资料</span
              >
            </p>
          </div>
          <div class="item">
            <p>团队主要成员</p>
            <p>
              <span v-for="(item, index) in membersData" :key="index"
                >{{ item.real_name }}&nbsp;</span
              >
              <span class="chakan" @click="membersDialogVisible = true"
                >查看基础资料</span
              >
            </p>
          </div>
          <div class="item">
            <p>项目内容</p>
            <p>
              {{ contentList.describe }}
            </p>
          </div>
          <!-- 自定义字段 -->
          <div
            class="item"
            v-for="(item, index) in contentList.meta"
            :key="index"
          >
            <p>{{ item.field_name }}</p>
            <p
              class="item-content"
              v-if="item.fields_value.indexOf('http') != -1"
            >
              <a :href="ele" v-for="ele in item.fields_value.split(' ')">{{
                ele
              }}</a>
            </p>
            <p class="item-content" v-else>{{ item.fields_value }}</p>
          </div>
          <div class="item">
            <p>状态</p>
            <p>{{ contentList.status_show }}</p>
          </div>
          <div class="item file">
            <p>申报附件</p>
            <div>
              <div
                class="file-item"
                v-for="(item, index) in contentList.attach"
                :key="index"
              >
                <p>附件名称：{{ item.attach_name }}</p>
                <div class="preview">
                  <div class="img">
                    <img
                      :src="
                        item.type === '1'
                          ? require('../../../assets/images/file.png')
                          : item.type === '2'
                          ? require('../../../assets/images/vedio.png')
                          : item.type === '3'
                          ? require('../../../assets/images/zip.png')
                          : require('../../../assets/images/pic.png')
                      "
                      alt=""
                    />
                  </div>
                  <div class="details">
                    <p class="title">{{ item.attach_name }}</p>
                    <p>
                      <span
                        >{{
                          (item.attach_size / 1024 / 1024).toFixed(2)
                        }}M</span
                      ><span>{{
                        item.type === "1"
                          ? "文档文件"
                          : item.type === "2"
                          ? "视频文件"
                          : item.type === "3"
                          ? "压缩文件"
                          : "图片文件"
                      }}</span>
                    </p>
                  </div>
                  <div class="preview-btn">
                    <div
                      v-if="item.type != '3'"
                      class="look"
                      @click="handlePreview(item.attach_id, item.type)"
                    >
                      <img src="@/assets/images/look.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-right">
        <el-form :model="ruleForm" ref="ruleForm">
          <div class="tableScore">
            <div class="head">
              <div class="title">评分指标</div>
              <div class="title">评分标准</div>
              <div class="title">评分范围</div>
              <div class="title">评分</div>
            </div>
            <div v-for="(item, index) in assessList" :key="index">
              <div class="tableTitle title">{{ item.name }}</div>
              <div class="tableContent">
                <div>
                  <div
                    v-for="(child, idx) in item.children"
                    :key="idx"
                    class="tableContent-item"
                  >
                    <div>
                      {{ child.summary }}
                    </div>
                    <div>
                      <span>(评分{{ "<=" + child.score }})</span>
                    </div>
                    <div>
                      <el-form-item prop="score">
                        <el-input
                          v-model="ruleForm.scoreing[child.project_assess_id]"
                          @change="
                            MaxNumber(
                              $event,
                              child.score,
                              child.project_assess_id
                            )
                          "
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <table>
            <tr>
              <th colspan="2">
                最终得分：<span>{{ scoreTotal }}</span>
              </th>
            </tr>
            <tr>
              <th>评语：</th>
              <td colspan="2" class="pingyu">
                <el-form-item prop="text">
                  <el-input type="textarea" v-model="ruleForm.text"></el-input>
                </el-form-item>
              </td>
            </tr>
          </table>
          <div class="footer">
            <!-- <div>{{ projectid }}</div> -->
            <div
              v-if="projectid != undefined || type === '1'"
              class="prev"
              @click="onPrev"
              :class="prevReadOnly ? 'disable' : ''"
            >
              <span><i class="el-icon-arrow-left"></i></span>
              上一课
            </div>
            <div class="middle">
              <el-form-item>
                <el-button
                  class="reset"
                  icon="iconfont icon-zhongxinpingjuan"
                  @click="onSaveForm('ruleForm')"
                  >保存</el-button
                >
                <el-button
                  icon="iconfont icon-guanbi"
                  class="close"
                  @click="back"
                  >关闭</el-button
                >
              </el-form-item>
            </div>
            <div
              v-if="projectid != undefined || type === '1'"
              class="next"
              @click="onNext"
              :class="nextReadOnly ? 'disable' : ''"
            >
              下一课
              <span><i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
        </el-form>
        <div class="ball">
          <p class="number">{{ scoreTotal }}</p>
          <p>总分</p>
        </div>
      </div>
    </div>
    <el-dialog
      title="课程团队负责人"
      :visible.sync="centerDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-table :data="principalData" border style="width: 100%">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="yuanxi" label="院系"> </el-table-column>
        <el-table-column prop="zhiwu" label="职务"> </el-table-column>
        <el-table-column prop="zhicheng" label="职称"> </el-table-column>
        <el-table-column prop="renwu" label="承担任务"> </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button
          icon="iconfont icon-guanbi"
          class="close"
          @click="centerDialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="课程团队主要成员"
      :visible.sync="membersDialogVisible"
      width="60%"
      :show-close="false"
      custom-class="table"
      center
    >
      <el-table :data="membersData" border style="width: 100%">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式"> </el-table-column>
        <el-table-column prop="yuanxi" label="院系"> </el-table-column>
        <el-table-column prop="zhiwu" label="职务"> </el-table-column>
        <el-table-column prop="zhicheng" label="职称"> </el-table-column>
        <el-table-column prop="renwu" label="承担任务"> </el-table-column>
      </el-table>
      <div class="dialog-footer">
        <el-button
          icon="iconfont icon-guanbi"
          class="close"
          @click="membersDialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <template v-if="FiledialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="FiledialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="FileScreen"
        :before-close="FilehandleClose"
      >
        <i class="el-icon-rank" @click="onFileFullScreen"></i>
        <div class="mask"></div>
        <iframe
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          frameborder="0"
          style="width: 100%; height: 100%"
        >
        </iframe>
      </el-dialog>
    </template>
    <template v-if="VideodialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="VideodialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="VideoScreen"
        :before-close="VideohandleClose"
      >
        <i class="el-icon-rank" @click="onVideoFullScreen"></i>
        <video
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          controls="controls"
        ></video>
        <!-- <iframe :src="
          'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
          attachId +
          '&token=' +
          token
        " 
        frameborder="0" 
        style="width: 100%; height: 100%">
        </iframe> -->
      </el-dialog>
    </template>
    <template v-if="PicdialogVisible">
      <el-dialog
        v-dialogDrag
        title="预览"
        :visible.sync="PicdialogVisible"
        width="80%"
        custom-class="filePreview"
        :fullscreen="PicScreen"
        :before-close="PichandleClose"
      >
        <i class="el-icon-rank" @click="onPicFullScreen"></i>
        <img
          width="100%"
          :src="
            'http://sapi.ps.cqooc.com/unit/attach/playurl?attach_id=' +
            attachId +
            '&token=' +
            token
          "
          alt=""
        />
      </el-dialog>
    </template>
  </div>
</template>
<script>
import {
  ExpertDeclareDetails,
  ExpertProjectAssess,
  ExpertDeclareCheck,
} from "@/api/login";

export default {
  name: "ShenBaoDetails",
  data() {
    return {
      ruleForm: {
        radio: "通过",
        text: "",
        scoreing: [],
      },
      contentList: "",
      assessList: "",
      scoreTotal: "",
      centerDialogVisible: false,
      dialogVisible: false,
      principalData: [],
      membersData: [],
      membersDialogVisible: false,
      // 文件预览
      FileYulan: false,
      FullScreen: true,
      FileScreen: false,
      VideoScreen: false,
      PicScreen: false,
      FiledialogVisible: false,
      VideodialogVisible: false,
      PicdialogVisible: false,
      Showbg: false,
      prevReadOnly: "",
      nextReadOnly: "",
      scoredetail: [],
      attachId: "",
      declareid: "",
      projectid: "",
      type: "",
      token: "",
      // pagePath: ""
    };
  },
  watch: {
    declareid(val) {
      let query = this.$router.history.current.query;
      let path = this.$router.history.current.path;
      //对象的拷贝
      let newQuery = JSON.parse(JSON.stringify(query));
      // 地址栏的参数值赋值
      newQuery.declare_id = val;
      this.$router.push({ path, query: newQuery });
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   if (from.path === "/experts-pingfen") {
  //     next((vm) => (vm.type = 1));
  //   } else {
  //     next();
  //   }
  // },
  methods: {
    handlePreview(attach_id, type) {
      this.attachId = attach_id;
      if (type === "1") {
        this.FiledialogVisible = true;
      } else if (type === "2") {
        this.VideodialogVisible = true;
      } else {
        this.PicdialogVisible = true;
      }
    },
    FilehandleClose() {
      this.FiledialogVisible = false;
    },
    VideohandleClose() {
      this.VideodialogVisible = false;
    },
    PichandleClose() {
      this.PicdialogVisible = false;
    },
    onFileFullScreen() {
      this.FileScreen = !this.FileScreen;
    },
    onVideoFullScreen() {
      this.VideoScreen = !this.VideoScreen;
    },
    onPicFullScreen() {
      this.PicScreen = !this.PicScreen;
    },
    FullFunction() {
      this.FullScreen = !this.FullScreen;
    },
    onSaveForm() {
      const scoreList = [];
      const form = this.ruleForm.scoreing.map((item) => {
        return item;
      });
      this.assessList.forEach((element) => {
        if (
          "children" in element &&
          element.children != null &&
          element.children.length != 0
        ) {
          element.children.forEach((item) => {
            const scoreObj = {
              project_assess_id: item.project_assess_id,
              name: item.name,
              score: form[item.project_assess_id],
            };
            scoreList.push(scoreObj);
          });
        }
      });
      this.scoredetail = JSON.stringify(scoreList);
      this.queryExpertDeclareCheck();
    },
    MaxNumber(value, maxScore, id) {
      this.scoreTotal = 0;
      this.scoreTotal = this.scoreTotal - 0;
      this.ruleForm.scoreing.forEach((item) => {
        this.scoreTotal += item - 0;
      });
      let reg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
      if (!reg.test(value)) {
        this.$message({
          message: "打分只能输入小数或者整数",
          type: "error",
        });
        var vlues = null;
        this.$set(this.ruleForm.scoreing, id, vlues);
        return false;
      }
      //不超过最大值
      if (value - 0 > maxScore - 0) {
        this.$message({
          message: "不可以超过最大值",
          type: "error",
        });
        var vlues = null;
        this.$set(this.ruleForm.scoreing, id, vlues);
        return false;
      }
      //最多输入一位小数
      let reg1 = /^[+-]?\d+(.\d)?$/;
      if (!reg1.test(value)) {
        this.$message({
          message: "打分只能保留一位小数",
          type: "error",
        });
        var vlues = null;
        this.$set(this.ruleForm.scoreing, id, vlues);
        return false;
      }
    },
    // 上一篇
    onPrev() {
      // console.log(this.contentList.pre_one);
      if (this.contentList.pre_one.length === 0) {
        this.prevReadOnly = true;
        this.nextReadOnly = false;
        this.$message({
          message: "已经是第一篇",
        });
      } else {
        this.nextReadOnly = false;
        this.declareid = this.contentList.pre_one.declare_id;
        this.queryExpertDeclareDetails();
        this.queryExpertProjectAssess();
      }
    },
    onNext() {
      if (this.contentList.next_one.length === 0) {
        this.nextReadOnly = true;
        this.prevReadOnly = false;
        this.$message({
          message: "已经是最后一篇",
        });
      } else {
        this.prevReadOnly = false;
        this.declareid = this.contentList.next_one.declare_id;
        this.queryExpertDeclareDetails();
        this.queryExpertProjectAssess();
      }
    },
    // 获取列表详情
    queryExpertDeclareDetails() {
      ExpertDeclareDetails({
        token: this.token,
        declare_id: this.declareid,
        project_id: this.projectid,
        type: this.type,
      }).then((result) => {
        if (result.code === 1) {
          const { data } = result;
          this.contentList = data;
          this.principalData = [];
          this.membersData = [];
          data.teamers.forEach((item) => {
            if (item.type_id === "1") {
              this.principalData.push(item);
            } else {
              this.membersData.push(item);
            }
          });
          if (result.msg === "数据不存在") {
            this.$router.push({
              path: "/dataError",
            });
          } else if (result.msg === "项目已过期") {
            this.$router.push({
              path: "/overdueError",
            });
          }
        }
      });
    },
    // 申报项目审核-详情(评审指标详情)
    queryExpertProjectAssess() {
      ExpertProjectAssess({
        token: this.token,
        declare_id: this.declareid,
      }).then((result) => {
        const { data } = result;
        this.scoreTotal = data.score_total;
        this.assessList = data.list;
        this.ruleForm.text = data.remark;
        this.assessList.forEach((item) => {
          if (
            "children" in item &&
            item.children !== null &&
            item.children.length !== 0
          ) {
            item.children.forEach((ele) => {
              if (ele.scoreing === -1) {
                this.ruleForm.scoreing[ele.project_assess_id] = "";
              } else {
                this.ruleForm.scoreing[ele.project_assess_id] = ele.scoreing;
              }
            });
          }
        });
      });
    },
    // 申报项目管理-提交保存
    queryExpertDeclareCheck() {
      ExpertDeclareCheck({
        token: this.token,
        declare_id: this.declareid,
        status: "1",
        remark: this.ruleForm.text,
        scoredetail: this.scoredetail,
      }).then((result) => {
        if (result.code === 1) {
          this.$message({
            message: "执行成功",
            type: "success",
          });
          this.$router.push({
            path: "/experts-shenbao",
            query: {
              project_id: this.projectid,
            },
          });
        }
      });
    },
    back() {
      if (this.type === "1") {
        this.$router.push("/experts-pingfen");
      } else if (this.projectid != undefined) {
        this.$router.push({
          path: "/experts-shenbao",
          query: {
            project_id: this.projectid,
          },
        });
      } else {
        this.$router.go(-1);
      }
    },
    backgroundShow() {
      this.$emit("backgroundShow", this.Showbg);
    },
  },
  created() {
    this.backgroundShow();
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    const declareid = this.$route.query.declare_id;
    const projectid = this.$route.query.project_id;
    const type = this.$route.query.type;
    this.token = token;
    this.declareid = declareid;
    this.projectid = projectid;
    this.type = type;
    this.queryExpertDeclareDetails();
    this.queryExpertProjectAssess();
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 100%;
  height: 100%;
}
.main {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  color: #242748;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  margin: 0 50px 20px 30px;
  text-align: left;
  font-family: "PingFang";
  .container {
    display: flex;
    justify-content: space-between;
    & > div {
      background-color: #fff;
      border-radius: 5px;
    }
    .container-right {
      height: 960px;
    }
  }
  .container2 {
    height: 980px;
    overflow-y: auto;
    & > div {
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
    }
    .container-right {
      height: auto;
    }
    .content {
      border-bottom: solid 1px #ccc;
    }
    .preview {
      width: 50% !important;
      .details {
        width: 82% !important;
      }
    }
  }
  .container-left {
    width: 770px;
  }
  .container-top {
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .title {
        font-size: 26px;
        font-family: "黑体";
        color: #5673ff;
        margin-right: 60px;
      }
      .oper {
        .shrink {
          background-color: #69a1ff;
          border: solid 1px #4d8df7;
          box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
        }
        /deep/.icon-zhankai {
          font-size: 18px;
        }
      }
    }
    .contentTitle {
      font-size: 22px;
      color: #242748;
      line-height: 32px;
      font-weight: 700;
      p {
        font-weight: 700;
      }
    }
  }
  .container-top {
    padding: 33px 45px 25px;
    border-bottom: solid 1px #e7e9eb;
  }
  .close {
    border: solid 1px #e7e9eb;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.14);
    color: #242748;
  }
  /deep/.el-button {
    width: 100px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    i {
      margin-right: 8px;
      vertical-align: bottom;
    }
  }
  .content {
    padding: 40px;
    height: 830px;
    overflow-y: auto;
    font-size: 18px;
    .item {
      display: flex;
      margin-bottom: 60px;
      .chakan {
        display: inline-block;
        margin-left: 30px;
        font-size: 12px;
        padding: 6px 12px;
        color: #fff;
        vertical-align: middle;
        border-radius: 5px;
        background-color: #69a1ff;
        border: solid 1px #4d8df7;
      }
      & > p:first-child {
        width: 200px;
      }
      & > p:nth-child(2) {
        word-wrap: break-word;
        word-break: break-all;
      }
      & > p:nth-child(2),
      & > div {
        width: calc(100% - 200px);
      }
      &:last-of-type {
        margin-bottom: 0;
      }
      .item-content {
        line-height: 25px;
        a {
          margin-right: 30px;
          color: blue;
          text-decoration: underline;
          word-wrap: break-word;
        }
      }
      .file-item {
        margin-bottom: 30px;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    .file {
      margin-bottom: 40px;
    }
    .preview {
      display: flex;
      align-items: center;
      width: 85%;
      margin: 20px 0 15px;
      padding: 20px 22px;
      background-color: #f4f7fc;
      border-radius: 5px;
      .img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        img {
          border-radius: 2px;
        }
      }
      .details {
        width: 75%;
        margin: 0 0 0 20px;
        .title {
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #242748;
          font-size: 14px;
          font-weight: 700;
        }
        p {
          line-height: 22px;
          font-size: 12px;
          color: #a1a4b5;
          span {
            margin-right: 10px;
          }
        }
      }
      .preview-btn {
        & > div {
          float: left;
          width: 18px;
          height: 18px;
          margin-left: 18px;
        }
        .del {
          width: 16px;
        }
      }
    }
    .middle {
      height: 40px;
    }
  }
  .container-right {
    width: calc(100% - 800px);
    position: relative;
    padding: 30px;
    overflow-y: auto;
    table {
      width: 100%;
    }
    .tableScore {
      & > div {
        display: flex;
        border: solid 1px #ccc;
        border-bottom: none;
        .title {
          border-right: solid 1px #ccc;
          padding-left: 15px;
          line-height: 60px;
          font-weight: 700;
          &:first-of-type {
            width: 17%;
          }
          &:nth-child(2) {
            width: 56%;
          }
          &:nth-child(3) {
            width: 17%;
          }
          &:last-of-type {
            width: 10%;
            border-right: none;
          }
        }
        .tableContent {
          width: calc(100% - 17%);
          .tableContent-item {
            display: flex;
            border-bottom: solid 1px #ccc;
            &:last-of-type {
              border-bottom: none;
            }
            & > div {
              padding: 5px 15px 15px;
              line-height: 30px;
            }
            & > div:first-child {
              color: #76818f;
              text-align: justify;
              width: 69%;
              border-right: solid 1px #ccc;
            }
            & > div:nth-child(2) {
              width: 21%;
              border-right: solid 1px #ccc;
              span {
                font-size: 16px;
              }
            }
            & > div:last-child {
              width: 12.1%;
              border-bottom: none;
            }
          }
        }
      }
      .tableTitle {
        line-height: 35px !important;
      }
      /deep/.el-input__inner {
        border: none;
        padding: 0;
        width: 100%;
        font-size: 18px;
      }
    }
    table td,
    th {
      border: solid 1px #ccc;
      padding: 15px;
      line-height: 35px;
      font-weight: 700;
    }
    table th:first-child {
      width: 17%;
      letter-spacing: 2px;
    }
    table th:last-child {
      width: 10%;
      border-right: solid 1px #ccc;
    }
    td {
      color: #76818f;
      text-align: justify;
      /deep/.el-form-item {
        height: 100%;
      }
      /deep/.el-form-item__content {
        height: 100%;
      }
      /deep/.el-textarea {
        height: 100%;
      }
      /deep/.el-textarea__inner {
        width: 100%;
        height: 100%;
        background-color: #f4f7fc;
        padding: 10px 18px;
        border-radius: 5px;
        color: #242748;
        font-size: 18px;
        font-family: "PingFang";
        border: none;
        resize: none;
        outline: none;
        &::placeholder {
          color: #242748;
          font-size: 18px;
          font-family: "PingFang";
        }
      }
      /deep/.el-form-item {
        margin-bottom: 0;
      }
    }
    .pingyu {
      height: 210px;
      line-height: 0;
    }
    /deep/.el-radio__inner {
      width: 20px;
      height: 20px;
    }
    /deep/.el-radio__input.is-checked .el-radio__inner {
      border-color: #6b84fb;
      background: none;
    }
    /deep/.el-radio__inner::after {
      width: 15px;
      height: 15px;
      background-color: #6b84fb;
    }
    /deep/.el-radio__label {
      font-size: 18px;
      color: #828b98;
      font-weight: 700;
    }
    th {
      span {
        color: #6a82fd;
        font-size: 30px;
        vertical-align: middle;
      }
    }
    .ball {
      position: fixed;
      right: 3%;
      bottom: 15%;
      width: 90px;
      height: 90px;
      padding: 20px 0;
      color: #fff;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      border-radius: 50%;
      opacity: 0.9;
      box-shadow: 0px 5px 20px 5px rgba(181, 192, 252, 0.5);
      border: solid 3px #fff;
      background-image: -moz-linear-gradient(to bottom, #748cfe, #5d78fc);
      background-image: -webkit-linear-gradient(to bottom, #748cfe, #5d78fc);
      background-image: -ms-linear-gradient(to bottom, #748cfe, #5d78fc);
      background-image: linear-gradient(to bottom, #748cfe, #5d78fc);
      z-index: 99;
      .number {
        font-size: 34px;
        margin-bottom: 5px;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    .prev,
    .next {
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      span {
        width: 40px;
        height: 40px;
        color: "#000";
        background-color: #fff;
        border: solid 1px #e7e9eb;
        box-shadow: 0px 1px 7.52px 0.48px rgba(172, 182, 236, 0.15);
        i {
          font-weight: 700;
        }
      }
    }
    .disable {
      pointer-events: none;
    }
    .middle {
      height: 40px;
      margin: 0 auto;
      .el-button {
        font-size: 14px;
        margin-right: 25px;
        &:last-of-type {
          margin-right: 0;
        }
        i {
          font-size: 20px;
        }
      }
      .reset {
        background-color: #5673ff;
        border: solid 1px #2d4eff;
        color: #fff;
        box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
      }
    }
  }
  /deep/.el-table {
    margin-bottom: 30px;
  }
  /deep/.dialog-footer {
    text-align: center !important;
  }
  /deep/input::-webkit-outer-spin-button,
  /deep/input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
  }
  /* 火狐 */
  /deep/input {
    -moz-appearance: textfield;
  }
  /deep/.table {
    border-radius: 20px;
    .cell {
      font-size: 16px;
    }
    .el-dialog__title {
      font-family: "黑体";
      font-size: 28px;
      color: #5673ff;
    }
    .el-dialog__header {
      padding: 30px 0 20px;
    }
    .dialog-footer {
      text-align: center;
    }
    .el-button {
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
    .el-table {
      margin-bottom: 30px;
    }
    .el-dialog__body {
      padding-top: 0 !important;
    }
  }
  /deep/.filePreview {
    height: 100%;
    i {
      font-size: 20px;
    }
    .mask {
      position: absolute;
      width: 17%;
      height: 56px;
      right: 1.5%;
      background-color: #323639;
    }
    .el-dialog__header {
      padding: 0.25rem 0.25rem 0.125rem;
    }
    .el-dialog__body {
      padding-top: 0 !important;
      height: 90%;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .el-icon-rank {
      position: absolute;
      right: 3%;
      top: 0.27rem;
      font-size: 16px !important;
      color: #909399;
    }
  }
  /deep/.el-input-number {
    width: 100% !important;
  }
}
</style>